<!--
 * @FileDescription 选择ye
 * @Author cl
 * @Date 20240326 11:02:12
 * @LastEditors cl
 * @LastEditTime 20240326 11:02:12
-->
<template>
    <div class="wp_class">
        <div class="header">
          <h1>在线故障诊断数据共享平台</h1>
          <div class="userName">张三</div>
          <div class="loginOut" @click="loginOut">退出登录</div>
        </div>
        <div class="content">
          <div class="carType" @click="toFaultPage">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">{{ HomeContent.Default.styleData.value[0]?.brand }}</div>
          </div>
          <!-- ========================================================================== -->
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款11 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <div class="carType">
            <img class="carImg" src="/public/images/页面二/car.png">
            <div class="edition">2018款 长续航版</div>
            <div class="carName">吉利帝豪EV450</div>
          </div>
          <!-- ========================================================================== -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import HomeContent from '@components/Apps/Simulation/HomeContent'
import { useRouter } from 'vue-router';
import { getStyle } from '@/api/apis';
const router = useRouter()
async function toFaultPage() {
  router.push('FaultPage')
}
// 退出函数
function loginOut() {
  router.push('/')
}
onMounted( async() => {
  let res = await getStyle()
  HomeContent.Default.styleData.value = res.data
  // HomeContent.Default.styleData.value = await getStyle()
  console.log('res',HomeContent.Default.styleData.value);
})
</script>

<style scoped>
.wp_class{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    background-color: black;
    z-index: 999;
}
.header {
    width: 100%;
    height: 172px;
    background-image: url('/public/images/页面二/BG.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
    overflow: hidden;
}
h1 {
    color: white;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 5px;
    margin-top: 23px;
    margin-left: 97px;
}
.userName {
    display: inline-block;
    background-image: url('/public/images/页面二/登录名.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
    width: 137px;
    height: 44px;
    color: aliceblue;
    text-align: center;
    line-height: 44px;
    font-size: 20px;
    position: absolute;
    top: 35px;
    right: 41px;
    z-index: 2;
}
.userName:hover+.loginOut {
    display: inline-block;
    background-image: url('/public/images/页面二/退出登录背景.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
    width: 133px;
    height: 77px;
    color: rgba(51, 204, 204, 1);
    text-align: center;
    font-size: 18px;
    position: absolute;
    right: 44px;
    top: 65px;   
    line-height: 100px;   
}
.loginOut:hover {
    display: inline-block;
    background-image: url('/public/images/页面二/退出登录背景.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
    width: 133px;
    height: 77px;
    color: rgba(51, 204, 204, 1);
    text-align: center;
    font-size: 18px;
    position: absolute;
    right: 44px;
    top: 65px;   
    line-height: 100px;       
}
.content {
    width: 1745px;
    height: 722px;
    margin-left: 91px;
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
}
.content::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.carType {
    background-image: url('/public/images/页面二/默认.png.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
    width: 285px;
    height: 339px;
    text-align: center;
    margin-right: 60px;
    margin-bottom: 90px;
}
.carType:nth-child(5n) {
    margin-right: 0px;
}
.carType:nth-last-child(-n+5) {
    margin-bottom: 0px;
}
.carType:hover {
    background-image: url('/public/images/页面二/选中.png.png');
    background-repeat: no-repeat;
    background-size: 100%,100%;
}
.carImg {
    width: 255px;
    height: 95px;
    margin-left: 10px;
    margin-top: 76px;
}
.edition {
    color: aliceblue;
    font-size: 18px;
    margin-top: 26px;
}
.carName {
    color: #32cbcb;
    font-size: 24px;
    margin-top: 7px;
}
</style>src/api/apis